<template>
    <div class="rx-tips" :class="['rx-tips-'+options.type]">
        <div class="rx-tips-icon" v-if="options.showIcon"><my-icon :type="getIcon"></my-icon></div>
        <div class="rx-tips-center">
            <div class="rx-tips-text"><div v-html="message"></div></div>
            <div class="rx-tips-span"><div v-html="descriptionMsg"></div></div>
        </div>
    </div>
</template>

<script>
import MForm from "../js/MForm";
import FormBase from "../js/FormBase";
export default {
    name: "MToolTips",
    mixins: [MForm,FormBase],
    data(){
        return{
            options:{}
        }
    },
    created(){
        this.options = this.metadata.options
    },
    computed:{
        message(){
            let {msgType,msgCondition} = this.options ;
            if(msgType === 'custom'){
                if(!msgCondition.includes('return')){
                    msgCondition = `return ${msgCondition}`
                }
                return new Function('data','row',msgCondition).call(this.formVm,this.formVm.data,this.data)
            }
            return this.options.msg ;
        },
        descriptionMsg(){
            let {desType,desCondition} = this.options ;
            if(desType === 'custom'){
                if(!desCondition.includes('return')){
                    desCondition = `return ${desCondition}`
                }
                return new Function('data','row',desCondition).call(this.formVm,this.formVm.data,this.data)
            }
            return this.options.description ;
        },
        getIcon(){
            let obj = {
                success:'icon-icon-test27',
                info:'icon-icon-test33',
                warning:'icon-lineicon-test36',
                error:'icon-linedelete',
            }
            if(this.options.iconType=='default'){
                return obj[this.options.type]
            }else {
                return this.options.icon
            }
        }
    },
    methods:{
        setCtlAttr(obj){
            //可通过引用属性修改控件属性 this.$refs['']
            //obj = {msg,showIcon,type,iconType,icon}
            let objAttr = Object.keys(obj);
            for (let item of objAttr){
                this.options[`${item}`] = obj[item];
            }
        }
    }
}
</script>

<style scoped>
.rx-tips{
    display: flex;
    padding: 0.5rem;
    box-sizing: border-box;
    border-radius: 8px;
}
.rx-tips-success{
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
}
.rx-tips-success i{
    color: #52c41a;
}
.rx-tips-warning{
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
}
.rx-tips-warning i {
    color: #faad14;
}
.rx-tips-info{
    background-color: #e6f4ff;
    border: 1px solid #91caff;
}
.rx-tips-info i {
    color: #1677ff;
}
.rx-tips-error{
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
}
.rx-tips-error i{
    color: #ff4d4f;
}
.rx-tips-icon{
    margin-right: 0.5rem;
}
.rx-tips-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rx-tips-text{
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}
.rx-tips-span{
    font-size: 0.7rem;
}
</style>
